<template>
  <view>
    <view class="picker-modal" v-if="show"></view>
    <view
      class="picker-content"
      :style="{ transform: show ? 'translateY(0)' : 'translateY(100%)' }"
    >
      <view class="picker-header">
        <view @click="onClose">取消</view>
        <view class="packer-title">{{ title }}</view>
        <view @click="onConfirm">确定</view>
      </view>
      <uni-search-bar
        placeholder="请输入"
        bgColor="#EEEEEE"
        @confirm="search"
        v-model="deviceName"
        @cancel="cancel"
      />
      <picker-view
        indicator-style="height: 90rpx;"
        class="picker-view"
        :value="value"
        @change="onChange"
      >
        <picker-view-column>
          <view
            class="picker-item"
            v-for="(item, index) in listData"
            :key="item.id"
            >{{ item.deviceName }}
          </view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>

<script>
import { queryDeviceStandingBook } from '@/api/spw/powerCut.js';
export default {
  props: {
    //标题文字
    title: {
      type: String,
      default: '',
    },
    areaId: {
      type: String | Number,
      default: '',
    },
  },
  data() {
    return {
      show: false,
      value: [0],
      listData: [],
      deviceName: '',
    };
  },
  methods: {
    // 打开
    open() {
      this.show = true;
      this.getData();
    },
    getData() {
      queryDeviceStandingBook({
        pageNum: 1,
        pageSize: 10000,
        areaId: this.areaId,
        keyword: this.deviceName,
      }).then((res) => {
        this.listData = res.rows;
      });
    },
    //确定
    onConfirm() {
      this.show = false;
      const selectData = {
        value: this.listData[this.value[0]].id,
        name: this.listData[this.value[0]].deviceName,
      };
      this.$emit('confirm', selectData);
    },
    // 取消
    onClose() {
      this.show = false;
    },
    //滑动picker
    onChange(e) {
      this.value = e.detail.value;
    },
    search() {
      this.getData();
    },
    cancel() {
      this.deviceName = '';
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
.picker-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.picker-content {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: #fff;
  transition: all 0.3s;
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 20rpx;
  padding: 20rpx 0;
}

.packer-title {
  text-align: center;
}

.picker-view {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  height: 490rpx;
  background-color: rgba(255, 255, 255, 1);
}

.picker-item {
  text-align: center;
  line-height: 46px;
  text-overflow: ellipsis;
}
</style>
